<!--
@description ：统计数据
-->

<template>
  <div class="wrap">
    <div class="header-btn">
      <div> 统计数据</div>
      <div>
        <el-button plain type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="g-card" style="padding: 20px;display: flex;justify-content: space-between">
      <el-form ref="operateForm1" :model="queryForm"
               @submit.prevent.native>
        <el-form-item prop="timeType" style="width: 300px">
          <el-radio-group v-model="queryForm.timeType" style="display: flex;justify-content: space-evenly"
                          @input="radioDateSelect(queryForm.timeType)">
            <div v-for="item in timeTypeList" :key="item.dictValue">
              <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="selectTime" style="width: 240px">
          <el-date-picker v-model="queryForm.selectTime" :end-placeholder="'结束日期'"
                          :start-placeholder="'开始日期'" @change="queryForm.timeType = ''"
                          range-separator="至" style="width: 100%;" type="daterange"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
      </el-form>
      <div style="display: flex;align-items: center">
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查 询</el-button>
        <el-button type="info" icon="el-icon-refresh" plain @click="handleReset">重 置</el-button>
      </div>
    </div>
    <div class="g-card" style="padding: 12px 0">
      <div class="allTotal">
        <div class="item">
          <span class="shuliang" style="color: #082aff">{{ count.homePv || 0 }}</span>
          <span>首页浏览总量</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #082aff">{{ count.homeUv || 0 }}</span>
          <span>首页浏览总人数</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #082aff">{{ count.homeTime || 0 }}</span>
          <span>首页平均停留时长</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #FF9100">{{ count.addPv || 0 }}</span>
          <span>加微页浏览总量</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #FF9100">{{ count.addUv || 0 }}</span>
          <span>加微页浏览总人数</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #FF9100">{{ count.addTime || 0 }}</span>
          <span>加微页平均停留时长</span>
        </div>
        <el-divider direction="vertical"></el-divider>
        <div class="item">
          <span class="shuliang" style="color: #2AD090">{{ count.addFriendCount || 0 }}</span>
          <span>新增好友总数</span>
        </div>
      </div>
    </div>
    <div class="g-card" style="padding: 20px">
      <el-table ref="tableRef" v-loading="tableLoading" :data="tableData" :row-style="{ height: '40px' }"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" max-height="460"
                row-key="journeyConfigId">
        <el-table-column :min-width="120" align="center" label="日期" prop="date"></el-table-column>
        <el-table-column :min-width="120" align="center" label="首页浏览量" prop="homePv"></el-table-column>
        <el-table-column :min-width="120" align="center" label="首页浏览人数" prop="homeUv"></el-table-column>
        <el-table-column :min-width="120" align="center" label="首页平均停留时长" prop="homeTime"></el-table-column>
        <el-table-column :min-width="120" align="center" label="加微页浏览量" prop="addPv"></el-table-column>
        <el-table-column :min-width="120" align="center" label="加微页浏览人数" prop="addUv"></el-table-column>
        <el-table-column :min-width="120" :show-overflow-tooltip="false" align="center" label="加微页平均停留时长"
                         prop="addTime"></el-table-column>
        <el-table-column :min-width="140" align="center" label="新增好友数" prop="addFriendCount"></el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></NormalPagination>
    </div>
  </div>
</template>
<script>

import {getAllStatistics, getStatistics} from "@/api/communityOperating/drainageLink";

export default {
  name: "drainageLinkStatistics", //统计数据
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        timeType: '0',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      }, // 页面信息查询
      timeTypeList: [
        {dictValue: '0', dictLabel: '今日'},
        {dictValue: '1', dictLabel: '最近7天'},
        {dictValue: '2', dictLabel: '最近30天'},
      ],
      tableData: [],
      tableLoading: false,
      count: {
        addPv: 0,
        addUv: 0,
        homeUv: 0,
        homePv: 0,
        addFriendCount: 0,
        addTime: '00:00:00',
        homeTime: '00:00:00',
      },
      total: 0,
    }
  },
  watch: {},
  methods: {
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    radioDateSelect(val) {
      let da = 0
      if (val == '0') {
        da = 0
      } else if (val == '1') {
        da = 7
      } else if (val == '2') {
        da = 30
      }
      let currentDate = new Date();
      let nowDate = new Date()
      nowDate.setHours(23, 59, 59, 59)
      let endDate = currentDate.toISOString().substring(0, 10)
      currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
      // let endDate = currentDate.toISOString().substring(0, 10); // 当天的日期作为结束日期
      currentDate.setDate(currentDate.getDate() - da + 1); // 将日期设置为需要的天数
      let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
      let datesArray = [startDate, endDate]
      this.queryForm.selectTime = datesArray
      this.$set(this.queryForm, 'selectTime', datesArray)
      // this.handleQuery()
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    getListFn() {
      let obj = {
        startTime: this.queryForm?.selectTime[0] || '',
        endTime: this.queryForm?.selectTime[1] || '',
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        linkId: this.$route.query.linkId
      }
      console.log(obj, 'obj')
      this.tableLoading = true
      getStatistics(obj).then(res => {
        this.tableData = res?.data?.rows
        this.total = res?.data?.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    getAllStatistics() {
      getAllStatistics({linkId: this.$route.query.linkId}).then(res => {
        this.count = {
          ...res.data
        }
      }).catch(() => {

      })
    },
    handleReset(){
      this.queryForm.timeType = '1'
      this.radioDateSelect('1')
      window.setTimeout(() => {
        this.handleQuery()
      })
    },
  },
  mounted() {
    this.queryForm.timeType = '1'
    this.radioDateSelect('1')
    this.getAllStatistics()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

@import "../../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.allTotal {
  display: flex;
  align-items: center;
  .item {
    padding: 21px 0px 18px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 24px;
    font-size: 14px;

    .shuliang {
      font-size: 26px;
      font-weight: bold;
      color: #393B44;
      line-height: 36px;
    }
  }
}

::v-deep{
  .el-form{
    display: flex;
    align-items: center;
  }
  .el-divider--vertical{
    height: 3em;
  }
}
</style>
